<style type="text/css">

#faq .faqContent .faqCategory {
    font-weight: bold;
    font-size: 13px;
    margin: 10px 0;
}

#faq .faqContent {
    margin-left: 30px;
}

#faq .faqContent ol {
    margin-left: 20px;
}

#faq .faqContent .faqAnswer {
    padding-left: 20px;
    margin: 5px 0;
    border-left: 2px solid #cccccc;
}

</style>
<script type="text/javascript">
window.addEvent('domready', function() {
	  var accordion = new Fx.Accordion($$('.faqQuestion'),$$('.faqAnswer'), {
	    opacity: 0,
	    onActive: function(toggler) { toggler.setStyle('color', '#f30'); },
	    onBackground: function(toggler) { toggler.setStyle('color', '#333'); }
	  });
});
</script>
<div class="headline">
  <h2>
    <?php echo $this->translate('Exam');?>
  </h2>
  <div class="tabs">
    <?php
      // Render the menu
      echo $this->navigation()
        ->menu()
        ->setContainer($this->navigation)
        ->render();
    ?>
  </div>
</div>
<div class="global_form" id="faq">
	<div style="width: 100%;">
		<div>
			<h3><?php echo $this->translate("Frequently Asked Questions"); ?></h3>
			<div class="faqContent">
	    		<?php foreach ($this->faqList as $categoryName => $faqs): ?>
	    			<div class="faqCategory"><?php echo $categoryName; ?></div>
	    			<ol>
	    			<?php foreach ($faqs as $faq): ?>
	    				<li>
	    					<a href="javascript:;" class="faqQuestion"><?php echo $faq->question; ?></a>
	    					<div id="faq_<?php echo $faq->faq_id; ?>" class="faqAnswer">
	    					<?php echo $faq->answer; ?>
	    					</div>    				
	    				</li>
	    			<?php endforeach; ?>
	    			</ol>
	    		<?php endforeach; ?>
    		</div>
		</div>
  	</div>
</div>

